<script setup>
import axiosInstance from '@/utils/request'
import { ref, computed } from 'vue'
import { TOKEN } from '@/utils/constant'
import { useUserStore } from '@/stores/user'
import { showFailToast, showSuccessToast } from 'vant'
const store = useUserStore()
const props = defineProps({
  friendCircle: Object,
  isLike: Boolean,
  likeNum: Number
})
const emit = defineEmits(['delete-success'])
const friendCircleComments = ref([])
const showComments = ref(false)
const newComment = ref('')
const isLike = ref(props.isLike)
const friendNum = ref(props.likeNum)
const getComments = () => {
  // 请求获取评论
  axiosInstance
    .get(
      `/chat-friend-circle-comment/list/${props.friendCircle.chatFriendCircle.id}`,
      {
        headers: {
          TOKEN: store.token
        }
      }
    )
    .then((response) => {
      console.log(response.data.data)
      friendCircleComments.value = response.data.data
    })
    .catch((error) => {
      console.log(error)
    })
}
const toggleComments = () => {
  showComments.value = !showComments.value
  if (showComments.value === true) {
    getComments()
  }
}
// 发送评论
const addComment = () => {
  if (newComment.value.trim() === '') {
    showToast('评论内容不能为空') // 可以提示用户
    return
  }
  axiosInstance
    .post(
      '/chat-friend-circle-comment/send',
      {
        id: props.friendCircle.chatFriendCircle.id,
        commentContent: newComment.value
      },
      {
        headers: {
          TOKEN: store.token
        }
      }
    )
    .then((response) => {
      newComment.value = ''
      getComments()
    })
    .catch((error) => {
      console.log(error)
    })
}
// 计算属性，返回格式化的时间字符串
const timeAgo = computed(() => {
  const timestamp = props.friendCircle.chatFriendCircle.timestamp // 获取时间戳
  const now = Date.now() // 当前时间戳
  const secondsAgo = Math.floor((now - timestamp) / 1000) // 计算过去的秒数

  if (secondsAgo < 60) {
    return `${secondsAgo}秒前`
  } else if (secondsAgo < 3600) {
    return `${Math.floor(secondsAgo / 60)}分钟前`
  } else if (secondsAgo < 86400) {
    return `${Math.floor(secondsAgo / 3600)}小时前`
  } else {
    return `${Math.floor(secondsAgo / 86400)}天前`
  }
})
const likeFriendCircle = () => {
  axiosInstance
    .put(
      `/friend-circle/like/${props.friendCircle.chatFriendCircle.id}`,
      null,
      {
        headers: {
          TOKEN: store.token
        }
      }
    )
    .then((response) => {
      isLike.value = response.data.data
      friendNum.value = response.data.friendNum
      console.log(friendNum.value)
    })
    .catch((error) => {
      console.log(error)
    })
}

const deleteFriendCircle = (id) => {
  axiosInstance
    .delete(`/friend-circle/${id}`, {
      headers: {
        TOKEN: store.token
      }
    })
    .then((response) => {
      showSuccessToast('删除成功')
      emit('delete-success') // 通知父组件删除成功
    })
    .catch((error) => {
      showFailToast('删除失败')
    })
}
</script>

<template>
  <div class="post-card">
    <div class="post-header">
      <img :src="friendCircle.avatar" class="avatar" alt="用户头像" />
      <div class="user-info">
        <p style="color: #000" class="username">{{ friendCircle.nickname }}</p>
        <p style="color: #000" class="post-time">{{ timeAgo }}</p>
      </div>
      <van-icon
        @click="deleteFriendCircle(friendCircle.chatFriendCircle.id)"
        v-if="friendCircle.userId === store.user.id"
        name="cross"
      />
    </div>
    <div class="post-content">
      <p style="color: #000">{{ friendCircle.chatFriendCircle.content }}</p>
      <div
        style="display: flex; flex-wrap: wrap; gap: 10px"
        v-if="
          friendCircle.chatFriendCircleContentFiles &&
          friendCircle.chatFriendCircleContentFiles.length > 0
        "
      >
        <div
          v-for="(file, index) in friendCircle.chatFriendCircleContentFiles"
          :key="index"
        >
          <img
            style="width: 90px; height: 90px"
            :src="file.contentFile"
            class="post-image"
            alt="动态图片"
          />
        </div>
      </div>
    </div>
    <div class="post-footer">
      <van-button
        :plain="!isLike"
        @click="likeFriendCircle"
        :type="isLike ? 'danger' : 'primary'"
        :icon="isLike ? 'like' : 'like-o'"
        size="small"
        class="like-button"
      >
        {{ friendNum }}
      </van-button>
      <van-button
        plain
        type="success"
        @click="toggleComments()"
        icon="chat-o"
        size="mini"
        class="comment-button"
      >
        {{ showComments ? '收起评论' : '查看评论' }}
      </van-button>
    </div>
    <div v-if="showComments" class="comments-section">
      <div
        v-for="(comment, index) in friendCircleComments"
        :key="index"
        class="comment"
        style="color: #000"
      >
        <span style="color: #000" class="comment-user"
          >{{ comment.nickname }}:</span
        >
        {{ comment.commentContent }}
      </div>
      <div class="comment-input-container">
        <van-field
          style="color: #000"
          v-model="newComment"
          placeholder="添加评论..."
          @keyup.enter="addComment"
          class="comment-input"
        />
        <van-button
          type="primary"
          size="mini"
          icon="chat-o"
          @click="addComment(comment)"
          class="send-button"
        >
          发送评论
        </van-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.post-card {
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  background: #fff;
}

.post-header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  flex-grow: 1;
}

.post-footer {
  display: flex;
  justify-content: space-between;
}

.comments-section {
  margin-top: 10px;
}

.comment-input-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 10px; /* 输入框与评论的间距 */
}

.comment-input {
  flex-grow: 1; /* 输入框占满剩余空间 */
  margin-right: 10px; /* 输入框与按钮的间距 */
}

.send-button {
  min-width: 80px; /* 设置最小宽度以确保按钮文字不换行 */
  border: none; /* 去掉边框 */
  background-color: transparent; /* 去掉背景色 */
  color: #007aff; /* 设定文本颜色 */
}
.like-button,
.comment-button {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  border: none; /* 去掉边框 */
  background-color: transparent; /* 去掉背景色 */
  color: #007aff; /* 设定文本颜色 */
  margin-right: 7px;
}

.like-button:hover,
.comment-button:hover {
  color: #0056b3; /* 鼠标悬停时颜色变化 */
}

.button-content {
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>
